{% extends "base.html" %}

{% block title %}{{ section.title }}{% endblock title %}

{% block head %}
<link rel="stylesheet" href="/blog.css">
{% endblock head %}

{% block content %}
{{ section.content | safe }}

<section id="articles" class="section">
	{% for page in section.pages %}
	<section>
		<div class="banner">
			<a href="{{ page.path }}"><img src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
		</div>
		<div class="details">
			<div class="headline">
				<h2><a href="{{ page.path }}">{{ page.title }}</a></h2>
			</div>
			<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format = "%B %d, %Y", timezone = "America/Los_Angeles") }}.</span>
			<div class="summary">
				<div>
					{{ page.summary | safe }}
				</div>
			</div>
			<div class="keep-reading">
				<a href="{{ page.path }}" class="link arrow">Keep Reading</a>
			</div>
		</div>
	</section>
	{% endfor %}
</section>
{% endblock content %}
